<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="google-site-verification" content="xBT4GhYoi5qRD5tr338pgPM5OWHHIDR6mNg1a3euekI" />
    <meta name="baidu-site-verification" content="093lY4ziMu" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="记录生活，记录知识">
    <meta name="keyword"  content="javascript, frontEnd">
    <link rel="shortcut icon" href="/img/header.jpg ">
    <!-- Place this tag in your head or just before your close body tag. -->
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <!--<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>-->
    <title>
        
          xiaopf
        
    </title>

    <link rel="canonical" href="https://xiaopf.github.io/404.html">

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <!-- Custom CSS --> 
    <link rel="stylesheet" href="/css/xiaopf.css">
    <!-- background effects end -->
    
    <!-- Pygments Highlight CSS -->
    <link rel="stylesheet" href="/css/highlight.css">

    <link rel="stylesheet" href="/css/widget.css">

    <link rel="stylesheet" href="/css/rocket.css">

    <link rel="stylesheet" href="/css/signature.css">

    <link rel="stylesheet" href="/css/toc.css">

    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/fonts.googleapis.css">

    <!-- Custom Fonts -->
    <!-- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
    <!-- Hux change font-awesome CDN to qiniu -->
    <!--<link href="https://cdn.staticfile.org/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> -->

    <link rel="stylesheet" href="/css/font-awesome.css">

    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">

    <!-- Hux Delete, sad but pending in China
    <link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/
    css'>
    -->


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- ga & ba script hoook -->
    <script></script>
</head>


<!-- hack iOS CSS :active style -->
<body ontouchstart="">

    
        <!-- background effects start -->
        <!-- show star -->
        <canvas id="canv" width="1440" height="768"></canvas>
<script>
  var num = 200;
  var w = window.innerWidth;
  var h = window.innerHeight;
  var max = 100;
  var _x = 0;
  var _y = 0;
  var _z = 150;
  var dtr = function(d) {
    return d * Math.PI / 180;
  };

  var rnd = function() {
    return Math.sin(Math.floor(Math.random() * 360) * Math.PI / 180);
  };
  var dist = function(p1, p2, p3) {
    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, 2));
  };

  var cam = {
    obj: {
      x: _x,
      y: _y,
      z: _z
    },
    dest: {
      x: 0,
      y: 0,
      z: 1
    },
    dist: {
      x: 0,
      y: 0,
      z: 200
    },
    ang: {
      cplane: 0,
      splane: 0,
      ctheta: 0,
      stheta: 0
    },
    zoom: 1,
    disp: {
      x: w / 2,
      y: h / 2,
      z: 0
    },
    upd: function() {
      cam.dist.x = cam.dest.x - cam.obj.x;
      cam.dist.y = cam.dest.y - cam.obj.y;
      cam.dist.z = cam.dest.z - cam.obj.z;
      cam.ang.cplane = -cam.dist.z / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
      cam.ang.splane = cam.dist.x / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
      cam.ang.ctheta = Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z) / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
      cam.ang.stheta = -cam.dist.y / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
    }
  };

  var trans = {
    parts: {
      sz: function(p, sz) {
        return {
          x: p.x * sz.x,
          y: p.y * sz.y,
          z: p.z * sz.z
        };
      },
      rot: {
        x: function(p, rot) {
          return {
            x: p.x,
            y: p.y * Math.cos(dtr(rot.x)) - p.z * Math.sin(dtr(rot.x)),
            z: p.y * Math.sin(dtr(rot.x)) + p.z * Math.cos(dtr(rot.x))
          };
        },
        y: function(p, rot) {
          return {
            x: p.x * Math.cos(dtr(rot.y)) + p.z * Math.sin(dtr(rot.y)),
            y: p.y,
            z: -p.x * Math.sin(dtr(rot.y)) + p.z * Math.cos(dtr(rot.y))
          };
        },
        z: function(p, rot) {
          return {
            x: p.x * Math.cos(dtr(rot.z)) - p.y * Math.sin(dtr(rot.z)),
            y: p.x * Math.sin(dtr(rot.z)) + p.y * Math.cos(dtr(rot.z)),
            z: p.z
          };
        }
      },
      pos: function(p, pos) {
        return {
          x: p.x + pos.x,
          y: p.y + pos.y,
          z: p.z + pos.z
        };
      }
    },
    pov: {
      plane: function(p) {
        return {
          x: p.x * cam.ang.cplane + p.z * cam.ang.splane,
          y: p.y,
          z: p.x * -cam.ang.splane + p.z * cam.ang.cplane
        };
      },
      theta: function(p) {
        return {
          x: p.x,
          y: p.y * cam.ang.ctheta - p.z * cam.ang.stheta,
          z: p.y * cam.ang.stheta + p.z * cam.ang.ctheta
        };
      },
      set: function(p) {
        return {
          x: p.x - cam.obj.x,
          y: p.y - cam.obj.y,
          z: p.z - cam.obj.z
        };
      }
    },
    persp: function(p) {
      return {
        x: p.x * cam.dist.z / p.z * cam.zoom,
        y: p.y * cam.dist.z / p.z * cam.zoom,
        z: p.z * cam.zoom,
        p: cam.dist.z / p.z
      };
    },
    disp: function(p, disp) {
      return {
        x: p.x + disp.x,
        y: -p.y + disp.y,
        z: p.z + disp.z,
        p: p.p
      };
    },
    steps: function(_obj_, sz, rot, pos, disp) {
      var _args = trans.parts.sz(_obj_, sz);
      _args = trans.parts.rot.x(_args, rot);
      _args = trans.parts.rot.y(_args, rot);
      _args = trans.parts.rot.z(_args, rot);
      _args = trans.parts.pos(_args, pos);
      _args = trans.pov.plane(_args);
      _args = trans.pov.theta(_args);
      _args = trans.pov.set(_args);
      _args = trans.persp(_args);
      _args = trans.disp(_args, disp);
      return _args;
    }
  };
  const canvasObj = document.getElementById("canv");
  (function() {
    "use strict";
    // 移动端不开启悬浮的星星
    const UA = window.navigator.userAgent;
    if(UA.indexOf('Android') >= 0 || UA.indexOf('iPhone') >= 0){
        return false;
    }
    // 控制star显示隐藏
    const mode = window.localStorage.getItem('mode');
    if((new Date().getHours() >= 7 && new Date().getHours() < 22) && mode === 'light'){
      window.localStorage.setItem('mode','light');
      canvasObj.style.display = "none";
      document.body.style.backgroundColor = "transparent";
      return false;
    } else {
      window.localStorage.setItem('mode','star');
      canvasObj.style.display = "block";
      document.body.className = "stars"
      document.body.style.backgroundColor = "rgba(26,26,26,1)";
      document.body.style.color = "#fff";
      setTimeout(() => {
        const gitmentContainer = document.getElementsByClassName("gitment-container");
        const gitmentEditorPreview = document.getElementsByClassName("gitment-editor-preview");
        const gitmentHeartIcon = document.getElementsByClassName("gitment-heart-icon");
        if(gitmentContainer.length > 0 && gitmentEditorPreview.length > 0 && gitmentHeartIcon.length > 0) {
            gitmentContainer[0].style.color = "#fff";
            gitmentContainer[1].style.color = "#fff";

            gitmentEditorPreview[0].style.backgroundColor = "#fff";
            gitmentHeartIcon[0].style.fill = "#fff";
        }
      }, 2000);
    }

    var threeD = function(param) {
      this.transIn = {};
      this.transOut = {};
      this.transIn.vtx = (param.vtx);
      this.transIn.sz = (param.sz);
      this.transIn.rot = (param.rot);
      this.transIn.pos = (param.pos);
    };

    threeD.prototype.vupd = function() {
      this.transOut = trans.steps(

        this.transIn.vtx,
        this.transIn.sz,
        this.transIn.rot,
        this.transIn.pos,
        cam.disp
      );
    };

    var Build = function() {
      this.vel = 0.04;
      this.lim = 360;
      this.diff = 200;
      this.initPos = 100;
      this.toX = _x;
      this.toY = _y;
      this.go();
    };

    Build.prototype.go = function() {
      this.canvas = document.getElementById("canv");
      this.canvas.width = window.innerWidth;
      this.canvas.height = window.innerHeight;
      this.$ = canv.getContext("2d");
      this.$.globalCompositeOperation = 'source-over';
      this.varr = [];
      this.dist = [];
      this.calc = [];

      for (var i = 0, len = num; i < len; i++) {
        this.add();
      }

      this.rotObj = {
        x: 0,
        y: 0,
        z: 0
      };
      this.objSz = {
        x: w / 5,
        y: h / 5,
        z: w / 5
      };
    };

    Build.prototype.add = function() {
      this.varr.push(new threeD({
        vtx: {
          x: rnd(),
          y: rnd(),
          z: rnd()
        },
        sz: {
          x: 0,
          y: 0,
          z: 0
        },
        rot: {
          x: 20,
          y: -20,
          z: 0
        },
        pos: {
          x: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
          y: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
          z: this.diff * Math.sin(360 * Math.random() * Math.PI / 180)
        }
      }));
      this.calc.push({
        x: 360 * Math.random(),
        y: 360 * Math.random(),
        z: 360 * Math.random()
      });
    };

    Build.prototype.upd = function() {
      cam.obj.x += (this.toX - cam.obj.x) * 0.05;
      cam.obj.y += (this.toY - cam.obj.y) * 0.05;
    };

    Build.prototype.draw = function() {
      this.$.clearRect(0, 0, this.canvas.width, this.canvas.height);
      cam.upd();
      this.rotObj.x += 0.1;
      this.rotObj.y += 0.1;
      this.rotObj.z += 0.1;

      for (var i = 0; i < this.varr.length; i++) {
        for (var val in this.calc[i]) {
          if (this.calc[i].hasOwnProperty(val)) {
            this.calc[i][val] += this.vel;
            if (this.calc[i][val] > this.lim) this.calc[i][val] = 0;
          }
        }

        this.varr[i].transIn.pos = {
          x: this.diff * Math.cos(this.calc[i].x * Math.PI / 180),
          y: this.diff * Math.sin(this.calc[i].y * Math.PI / 180),
          z: this.diff * Math.sin(this.calc[i].z * Math.PI / 180)
        };
        this.varr[i].transIn.rot = this.rotObj;
        this.varr[i].transIn.sz = this.objSz;
        this.varr[i].vupd();
        if (this.varr[i].transOut.p < 0) continue;
        var g = this.$.createRadialGradient(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p, this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2);
        this.$.globalCompositeOperation = 'lighter';
        g.addColorStop(0, 'hsla(255, 255%, 255%, 1)');
        g.addColorStop(.5, 'hsla(' + (i + 2) + ',85%, 40%,1)');
        g.addColorStop(1, 'hsla(' + (i) + ',85%, 40%,.5)');
        this.$.fillStyle = g;
        this.$.beginPath();
        this.$.arc(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2, 0, Math.PI * 2, false);
        this.$.fill();
        this.$.closePath();
      }
    };
    Build.prototype.anim = function() {
      window.requestAnimationFrame = (function() {
        return window.requestAnimationFrame ||
          function(callback, element) {
            window.setTimeout(callback, 1000 / 60);
          };
      })();
      var anim = function() {
        this.upd();
        this.draw();
        window.requestAnimationFrame(anim);
      }.bind(this);
      window.requestAnimationFrame(anim);
    };

    Build.prototype.run = function() {
      this.anim();

      window.addEventListener('mousemove', function(e) {
        this.toX = (e.clientX - this.canvas.width / 2) /-80;
        this.toY = (e.clientY - this.canvas.height / 2) /80;
      }.bind(this));
      window.addEventListener('touchmove', function(e) {
        e.preventDefault();
        this.toX = (e.touches[0].clientX - this.canvas.width / 2) /-80;
        this.toY = (e.touches[0].clientY - this.canvas.height / 2) /80;
      }.bind(this));
      window.addEventListener('mousedown', function(e) {
        for (var i = 0; i < 100; i++) {
          this.add();
        }
      }.bind(this));
      window.addEventListener('touchstart', function(e) {
        e.preventDefault();
        for (var i = 0; i < 100; i++) {
          this.add();
        }
      }.bind(this));
    };
    var app = new Build();
    app.run();
  })();
  
  window.addEventListener('resize', function() {
    canvasObj.width = w = window.innerWidth;
    canvasObj.height = h = window.innerHeight;
  }, false);
  
</script>

<style  type="text/css">
  body{
    text-align: -webkit-auto;
  }
  .stars div,.stars p,.stars ul,.stars li{
    color: #fff;
    filter:alpha(Opacity=90);
    -moz-opacity:0.98;
    opacity: 0.98; 
  }
  body hr{
    background-color: rgba(255,255,255,0.4);
    height: 1px;
    border: none;
  }
  #cnblogs_post_body p img{
    max-width: 100%;
  }
  #container {
    width: 90%;
    position: relative;
    background-color: rgba(0, 0, 0, 0);
  }
  #canv{
    position: fixed;
    display: none;
  }
  .cnblogs_code {
    color: #f8f8f8;
    background-color: rgba(245, 245, 245, 0);
    border: 1px solid #cccccc6e;
  }
  .cnblogs_code span{
    color: #ccc!important;
    background-color: #f5f5f500!important;
  }
  .cnblogs_code div {
    background-color: rgba(0, 0, 0, 0);
  }
  .cnblogs_code_toolbar a:link{
    background-color: #f5f5f500!important;
  }
  .cnblogs_code_toolbar a:link img{
    background-color:#f5f5f500!important;
  }
  div.commentform textarea.comment_textarea {
    background-color: #f0f8ff00;
  }
</style>
        <!-- background effects end -->
    

	<!-- Modified by Yu-Hsuan Yen -->
<!-- Post Header -->
<style type="text/css">
    header.intro-header{
        
            background-image: url('/img/404-bg.jpg')
            /*page*/
        
    }
    
    #signature{
        background-image: url('/img/signature/Just-do-it-white.png');
    }
    
</style>

<header class="intro-header" >
    <!-- Signature -->
    <div id="signature">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                
                    <div class="site-heading">
                        <h1>xiaopf&#39;s site</h1>
                        <!--<hr class="small">-->
                        <span id="subdusi" class="subheading">你来到了没有知识的荒原 :(</span>
                    </div>
                

                </div>
            </div>
        </div>      
    </div>
    <div class="waveWrapper">
        <div class="wave wave_before" style="background-image: url('/img/wave-top80.png')"></div>
        <div class="wave wave_after" style="background-image: url('/img/wave-top80.png')"></div>
    </div>
</header>

	
    <!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">xiaopf&#39;s site</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <!-- Known Issue, found by Hux:
            <nav>'s height woule be hold on by its content.
            so, when navbar scale out, the <nav> will cover tags.
            also mask any touch event of tags, unfortunately.
        -->
        <div id="huxblog_navbar">
            <div class="navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="/">Home</a>
                    </li>
                    

                        
                    

                        
                    

                        
                        <li>
                            <a href="/about/">About</a>
                        </li>
                        
                    

                        
                        <li>
                            <a href="/archive/">Archives</a>
                        </li>
                        
                    

                        
                        <li>
                            <a href="/tags/">Tags</a>
                        </li>
                        
                    
                    <li style="cursor: pointer;">
                        <p 
                            style="cursor: pointer;color:white;padding: 20px;margin:0;text-transform: uppercase;font-size: 12px;line-height: 20px;font-weight: 800;letter-spacing: 1px;"
                            id="changeMode"
                            title="change mode"
                            href="javascript:void(0)"
                        >
                            Mode
                        </p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>
<script>
    // Drop Bootstarp low-performance Navbar
    // Use customize navbar with high-quality material design animation
    // in high-perf jank-free CSS3 implementation
    const $body   = document.body;
    const $toggle = document.querySelector('.navbar-toggle');
    const $navbar = document.querySelector('#huxblog_navbar');
    const $collapse = document.querySelector('.navbar-collapse');
    const $changeMode = document.querySelector('#changeMode');

    $changeMode.addEventListener('click', handleChangeMode)
    $toggle.addEventListener('click', handleMagic)
    
    let mode = window.localStorage.getItem('mode');
    if(mode === 'light'){
        $changeMode.innerHTML='STAR'
    }else{
        $changeMode.innerHTML='LIGHT'
    }
    
    function handleChangeMode(e){
        let mode = window.localStorage.getItem('mode');
        if(!mode){
            if((new Date().getHours() >= 7 && new Date().getHours() < 22)){
                window.localStorage.setItem('mode','light');
            }else{
                window.localStorage.setItem('mode','star');
            }
        }else{
            if(mode==='star'){
                window.localStorage.setItem('mode','light');
            }else{
                window.localStorage.setItem('mode','star');
            }
        }
        window.location.reload()
    }
    function handleMagic(e){
        if ($navbar.className.indexOf('in') > 0) {
        // CLOSE
            $navbar.className = " ";
            // wait until animation end.
            setTimeout(function(){
                // prevent frequently toggle
                if($navbar.className.indexOf('in') < 0) {
                    $collapse.style.height = "0px"
                }
            },400)
        }else{
        // OPEN
            $collapse.style.height = "auto"
            $navbar.className += " in";
        }
    }
</script>


    <!-- Main Content -->
    
<!-- Page Header -->
<header class="intro-header" style="background-image: url('/img/404-bg.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 ">
                <div class="site-heading">
                    <h1>404</h1>
                    <!--<hr class="small">-->
                    <span class="subheading">你来到了没有知识的荒原 :(</span>
                </div>
            </div>
        </div>
    </div>
</header>

<script>
    document.body.classList.add('page-fullscreen');
</script>


    <!-- Footer -->
    <!-- Footer -->
<footer id="footer">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <ul class="list-inline text-center">

                
                    <li>
                        <a target="_blank"  href="https://github.com/xiaopf">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                

                
                    <li>
                        <a target="_blank" href="https://twitter.com/perfect_shaw">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                

                
                    <li>
                        <a target="_blank" href="https://www.instagram.com/perfect__shaw">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                

                
                    <li>
                        <a target="_blank" href="https://www.zhihu.com/people/pf-xiao">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa  fa-stack-1x fa-inverse">知</i>
                            </span>
                        </a>
                    </li>
                

                

                

                

                </ul>
                <p class="copyright text-muted">
                    Copyright &copy; xiaopf 2019 
                    <br>
                    Powered by 
                    <a href="https://github.com/dusign/hexo-theme-snail" target="_blank" rel="noopener">
                        <i>hexo-theme-snail</i>
                    </a> | 
                    <iframe style="margin-left: 2px; margin-bottom:-5px;" frameborder="0" scrolling="0"
                        width="100px" height="20px"
                        src="https://ghbtns.com/github-btn.html?user=dusign&repo=hexo-theme-snail&type=star&count=true">
                    </iframe>
                </p>
            </div>
        </div>
    </div>

</footer>

<!-- jQuery -->
<script src="/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="/js/bootstrap.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="/js/hux-blog.min.js"></script>

<!-- Search -->
<script src="/js/search.js"></script>

<!-- async load function -->
<script>
    function async(u, c) {
      var d = document, t = 'script',
          o = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
      o.src = u;
      if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
      s.parentNode.insertBefore(o, s);
    }
</script>


<!-- jquery.tagcloud.js -->
<script>
    // only load tagcloud.js in tag.html
    if($('#tag_cloud').length !== 0){
        async("https://xiaopf.github.io/js/jquery.tagcloud.js",function(){
            $.fn.tagcloud.defaults = {
                //size: {start: 1, end: 1, unit: 'em'},
                color: {start: '#bbbbee', end: '#0085a1'},
            };
            $('#tag_cloud a').tagcloud();
        })
    }
</script>

<!--fastClick.js -->
<script>
    async("https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js", function(){
        var $nav = document.querySelector("nav");
        if($nav) FastClick.attach($nav);
    })
</script>


<!-- Google Analytics -->


<script>
    // dynamic User by Hux
    var _gaId = 'UA-154429678-1';
    var _gaDomain = 'https://xiaopf.github.io/';

    // Originial
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', _gaId, _gaDomain);
    ga('send', 'pageview');
</script>




<!-- Baidu Tongji -->


<!-- Search -->

    <script type="text/javascript">      
        var search_path = "search.xml";
        if (search_path.length == 0) {
            search_path = "search.xml";
        }
    var path = "/" + search_path;
    searchFunc(path, 'local-search-input', 'local-search-result');
    </script>


<!-- busuanzi -->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>





	<a id="rocket" href="#top" class=""></a>
	<script type="text/javascript" src="/js/totop.js?v=1.0.0" async=""></script>
    <script type="text/javascript" src="/js/toc.js?v=1.0.0" async=""></script>

    
        <!-- background effects start -->
        

        
            <script type="text/javascript" src="/js/mouse-click.js" content='[&#34;🌱&#34;,&#34;just do it&#34;,&#34;🌾&#34;,&#34;🍀&#34;,&#34;don&#39;t give up&#34;,&#34;🍂&#34;,&#34;🌻&#34;,&#34;try it again&#34;,&#34;🍃&#34;,&#34;never say die&#34;,&#34;🌵&#34;,&#34;🌿&#34;,&#34;🌴&#34;]' color='[&#34;rgb(121,93,179)&#34; ,&#34;rgb(76,180,231)&#34; ,&#34;rgb(184,90,154)&#34; ,&#34;rgb(157,211,250)&#34; ,&#34;rgb(255,0,0)&#34; ,&#34;rgb(242,153,29)&#34; ,&#34;rgb(23,204,16)&#34; ,&#34;rgb(222,0,0)&#34; ,&#34;rgb(22,36,92)&#34; ,&#34;rgb(127,24,116)&#34; ,&#34;rgb(119,195,79)&#34; ,&#34;rgb(4,77,34)&#34; ,&#34;rgb(122,2,60)&#34;]'></script>
        

        <!-- background effects end -->
    

</body>

</html>
